<template>
  <div>
      <div class="audio" @mousedown="move">
        <div class="audioTitle">
          文件播放
          <i class="el-icon-close" @click="close"></i>
        </div>
        <audio :src="'/api/threesuns'+path" autoplay controls></audio>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    path: {
      type: String,
      default: ""
    }
  },
  methods: {
    move(e) {
      let box = document.querySelector(".audio");
      let box_left = parseInt(box.style.left || getComputedStyle(box).left);
      let box_top = parseInt(box.style.top || getComputedStyle(box).top);
      let box_a = e.pageX;
      let box_b = e.pageY;
      document.onmousemove = e => {
        let k = e.pageX;
        let j = e.pageY;
        let left = k - box_a + box_left;
        let top = j - box_b + box_top;
        box.style.left = left + "px";
        box.style.top = top + "px";
      };
      document.onmouseup = e => {
        document.onmousemove = null;
      };
    },
    close(){
        this.$emit('close')
    }
  }
};
</script>
<style scoped>
.audio {
  position: absolute;
  top: 0;
  z-index: 99;
  overflow: hidden;
  background-color: #fff;
}
.audioTitle {
  background-color: #00968e;
  padding: 15px;
  text-align: center;
  position: relative;
  cursor: move;
}
.el-icon-close {
  position: absolute;
  right: 10px;
  cursor: pointer;
}
</style>